<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>XX 购物网站</title>
    <!-- 引入 Bootstrap CSS -->
    <style>
        .img-h img {
            width: 100%;
            height: auto;
        }

        .right {
            margin-bottom: 20px;
        }

        .carousel-inner img {
            width: 100%;
            height: 450px;
            object-fit: cover;
        }

        .list-group-item:hover {
            background-color: #f8f9fa; /* 背景颜色变化 */
            cursor: pointer; /* 鼠标变成指针 */
        }

        .card-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 10px;
        }

        .card {
            width: 100%;
            height: auto; /* 高度自适应内容 */
        }

        .card img {
            width: 100%;
            height: 150px;
            object-fit: cover;
        }

        .list-group-item {
            position: relative;
            display: flex;
            align-items: center;
            padding-left: 0; /* 去掉左边距，确保图片与文字对齐 */
        }

        .list-group-item img {
            width: 50px;
            height: 50px;
            object-fit: cover; /* 保持图片比例并裁剪溢出部分 */
            margin-right: 10px; /* 图片和文字之间的间距 */
        }

        .list-group-item .rank {
            font-weight: bold;
            margin-right: 10px; /* 排名和图片之间的间距 */
        }

        .list-group-item .hover-text {
            display: none;
            position: absolute;
            left: 0;
            top: 100%;
            background-color: #f8f9fa;
            border: 1px solid #ddd;
            padding: 5px;
            z-index: 1000;
            width: 100%;
            box-sizing: border-box;
        }

        .list-group-item:hover .hover-text {
            display: block;
        }

        .main-content {
            display: flex;
        }

        .list-group p {
            font-weight: bold;
            margin-bottom: 10px;
        }

        .product-image {
            width: 100%;
            height: auto;
            object-fit: cover;
        }

        .quantity-input {
            width: 60px;
        }

        /* 优化搜索框和购物车 */
        .search-bar input {
            width: 300px;
        }

        .search-bar button {
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <!-- 顶部导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-warning shadow-sm">
        <div class="container">
            <a class="navbar-brand mr-left" href="#"><img src="image/logo.png" alt="图片" class="w-100" height="50px"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">书籍</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">数码</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">家电</a>
                    </li>
                </ul>
                <form class="d-flex search-bar">
                    <input class="form-control me-2" type="search" placeholder="搜索商品" aria-label="搜索">
                    <button class="btn btn-outline-success" type="submit">搜</button>
                </form>
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">购物车</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="index01.html">登录</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="index02.html">注册</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 轮播图 -->
    <div id="carouselExampleCaptions" class="carousel slide container" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="image/lun1.png" class="d-block w-100" height="250px" loading="lazy">
            </div>
            <div class="carousel-item">
                <img src="image/lun2.png" class="d-block w-100" height="250px" loading="lazy">
            </div>
            <div class="carousel-item">
                <img src="image/lun3.png" class="d-block w-100" height="250px" loading="lazy">
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        </button>
        <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
        </button>
    </div>

    <hr class="bg-warning">

    <!-- 好物推荐 -->
    <h2 class="container">好物推荐</h2>
    <div class="container">
        <div class="row">
            <!-- 优化商品卡片结构 -->
            <div class="col-md-4">
                <div class="right">
                    <div class="right-left">
                        <img src="image/纯棉商务休闲衬衣.png" title="衬衣" alt="衬衣" class="img-fluid product-img w-100" style="height: 350px;">
                    </div>
                    <div class="right-right">
                        <h4><a href="card.html">纯棉商务休闲衬衣</a></h4>
                        <p>精致与休闲造型兼备的牛津纺衬衫。简约素雅的风格，新潮百搭</p>
                        <h5 style="color:#F30">特价￥299</h5>
                    </div>
                </div>
            </div>
            <!-- 可以继续添加更多商品卡片 -->
        </div>
    </div>

    <hr class="bg-warning">

    <!-- 书籍展示 -->
    <h2 class="container">书籍</h2>
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <!-- 使用卡片展示 -->
                <div class="card-grid">
                    <div class="card">
                        <img src="image/三国演义.png" class="card-img-top" alt="三国演义">
                        <div class="card-body">
                            <h5 class="card-title">三国演义</h5>
                            <p class="card-text">内容简介...等。</p>
                        </div>
                    </div>
                    <!-- 可以继续添加更多书籍卡片 -->
                </div>
            </div>
        </div>
    </div>

    <!-- 引入 JS -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
</body>

</html>
